<%@ page contentType="text/html;charset=UTF-8" %>
<%@page import="org.apache.struts2.components.Include"%>
<%@ include file="/commons/taglibs.jsp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@ include file="/commons/meta.jsp" %>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>gtfrid</title>

<link href="gt_grid.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="gt_msg_cn.js"></script>
<script type="text/javascript" src="gt_grid_all.js"></script>
<script type="text/javascript" >
	
		function getClientTestData(max){
		max=max||100;
		var getInt=function(min,max) {
				min = min || 0;
				max = max || 100;
				var _min= Math.min(min,max);
				max=Math.max(min,max);
				min=_min;
				var step= max - min +1;
				var s= (Math.random()+1)*max*10 % step;
				var num= min +  s ;
				return parseInt(num,10);
		}

		var data=[];
		var gl=['M','F','U'];
		for (var i=0;i<max;i++){
			var record={ no : 30+i , 
					name : 'abc'+i , 
					age :getInt(12,15) , 
					gender : gl[getInt(1,9)%3] , 
					english : 50+getInt(1,49), 
					math : 40+getInt(1,59)
				}
			data.push(record);
		}
		return data;	
	}

// 然后执行下面的语句, 客户端的数据就会有200条. (作为测试,我没有生成太多).
var data1 = getClientTestData( 200 );

var dsConfig= {
	fields :[
		{name : 'no'     ,  type: 'int'     , index : 'no'      },
		{name : 'name'   ,  type: 'string'  , index : 'name'    },
		{name : 'age'    ,  type: 'int'     , index : 'age'     },
		{name : 'gender' ,  type: 'string'  , index : 'gender'  },
		{name : 'english',  type: 'float'   , index : 'english' },
		{name : 'math'   ,  type: 'float'   , index : 'math'    },
		{name : 'total'   , type: 'float',
			initValue : function(record){
				return record['english'] + record['math'];   
			}
		}
	]
};



var colsConfig = [
		{ id : 'no'     ,header : '学号'  ,width : 100 , align :'right'  },
		{ id : 'name'   ,header : '性名'    ,width : 200 , align :'right'   },
		{ id : 'age'    ,header : '年龄'   ,width : 100 , align :'right'    },
		{ id : 'gender' ,header : '性别' , renderer : GT.Grid.mappingRenderer(  {'U': '未知' , 'M':'男', 'F':'女'} , '未知' )     ,width : 100 , align :'right'  },
		{ id : 'english' , header : '英语成绩'  , width : 100 , align :'right'    },
		{ id : 'math'    , header : '数学成绩'  , width : 100 , align :'right'   },
		{ id : 'total'   , header : "总成绩" , width : 100 , align :'right',
			renderer : function(value ,record,columnObj,grid,colNo,rowNo){
				   var total = record['total'];
				   if (total>170) {
						total =  '<span style="color:red" >'+ total +'</span>';
				   }else if (total<120) {
						total = '<span style="color:blue" >'+ total +'</span>';
				   }
				   return total;
			}
		},
			{ id : 'detail'   , header : "详细信息" , width : 120,
			renderer : function(value ,record,columnObj,grid,colNo,rowNo){
			return '<a href=".?no='+record['no']+'" >'+ record['name'] +' 的详细信息</a>';
		}
	}
];
var gridConfig={

	id : "grid1",
	
	dataset : dsConfig ,

	columns : colsConfig ,

	container : 'grid1_container', 

	toolbarPosition : 'bottom',


	
	pageSize : 10 ,
	 toolbarContent : 'nav | pagesize | goto | state'  

};

var mygrid=new GT.Grid( gridConfig );

GT.Utils.onLoad( GT.Grid.render(mygrid) );
</script>
</head>

<body>
<!-- gridµňކ�->
<div id="grid1_container" style="width:1000px;height:300px">
</div>

 </body>
</html>
